<template>
	<view>
		<view class="titles-bar">
			<view>
				<view class="order-time">{{ date }}</view>
			</view>
			<view class="time-manage">
				<picker class="time-choose" mode="date" :value="date" @change="bindDateChange">
					<image class="time-choose-img" :src="icons.timeManage"></image>
				</picker>
			</view>
		</view>
		<view class="table-head">
			<view v-for="(item, index) in headList" :key="index" class="head-item">
				{{ item.name }}
			</view>
		</view>
		<view class="table-content">
			<view v-for="(item, index) in list" :key="index" class="content-list">
				<view class="content-item">
					<view class="iconClum" :class="colorClass(item.type)">{{ pickUpStatus(item.type) }}</view>
				</view>
				<view class="content-item">
					{{ item.alias }}
				</view>
				<view class="content-item">
					{{ item.code }}
				</view>
				<view class="content-item">
					{{ item.number }}
				</view>
				<view class="content-item">
					{{ item.create_time.split(' ')[1] }}
				</view>
			</view>
		</view>
		<uni-popup ref="detailsPopup" type="bottom">
			<view class="determine-content">
				<view class="determine-top">
					<view class="determine-title">
						<view class="determine-name">配送码</view>
						<view class="determine-close" @click="popClose">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.close"></image>
						</view>
					</view>

					<view class="determine-code">
						<valid-code ref="code" :maxlength="6" :isPwd="false" @finish="getDetails"></valid-code>
					</view>
				</view>
				<template v-if="showTemp">
					<view class="determine-bar"></view>
					<view class="determine-main">
						<view class="determine-items">
							<view class="items-name">供应商名称</view>
							<view class="items-val">{{ temp.supplier_name }}</view>
						</view>
						<view class="determine-items">
							<view class="items-name">备货时间</view>
							<view class="items-val">{{ temp.setout_time }}</view>
						</view>
						<view class="determine-items">
							<view class="items-name">货品名</view>
							<view class="items-val">{{ temp.goods_name }}</view>
						</view>
						<view class="determine-items">
							<view class="items-name">数量</view>
							<view class="items-val">{{ temp.sum_number }} 份</view>
						</view>
						<view class="determine-items">
							<view class="items-name">机器点位</view>
							<view class="items-val">{{ temp.equipment_code }}</view>
						</view>
					</view>
					<view class="determine-bottom">
						<view class="determine" @click="submitConfirm">确认</view>
					</view>
				</template>
			</view>
		</uni-popup>
		<view class="flex-submit">
			<view class="submit-button" @click="showDetails()">
				<view class="pick-up-img">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.submitButton"></image>
				</view>
				<view class="pick-up-name">扫一扫</view>
			</view>
		</view>
	</view>
</template>

<script>
	import validCode from '@/components/p-validecode/validcode.vue'
	import titleBar from '@/components/title-bar/index.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import wx from "weixin-js-sdk";

	export default {
		components: {
			titleBar,
			uniPopup,
			validCode
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				start_date: currentDate,
				end_date: currentDate,
				other: '请输入',
				icons: {
					timeManage: '/static/images/icon_sj@3x.png',
					submitButton: '/static/images/icon_bh_sel@3x.png',
					close: '/static/images/icons/icon_gb@3x.png'
				},
				code: "",
				headList: [{
					name: '类型'
				}, {
					name: '机器点位'
				}, {
					name: '配送码'
				}, {
					name: '数量'
				}, {
					name: '时间'
				}, ],
				list: [],
				showTemp: false,
				date: '',
				temp: {
					supplier_name: '',
					supply_name: '',
					create_time: '',
					goods_name: '',
					number: undefined,
					equipment_code: ''
				}
			}
		},
		created() {
			this.getList()
			this.date = this.dateMode(new Date(), 'nowDate');
		},
		methods: {
			getList() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_dispatching_getList",
					version: "1.0",
					type: "",
					data: {
						type: 1
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			// 提货
			showDetails() {
				// 微信扫一扫
				// const url = encodeURIComponent(location.href.split('#')[0])
				const _this = this
				uni.request({
					url: 'https://callback.stqcm.com/ad1/public/index.php?s=api/lunchtest/signature', //仅为示例，并非真实接口地址。
					method: 'POST', //请求方式POST或GET
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: { //参数
						url: "http://csb.stqcm.com/lunch/pages/backstage/delivery/renewal?" + _this.version
						// url: url
					},
					success: res => {
						wx.config({
							// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
							debug: false,
							// 必填，公众号的唯一标识
							appId: res.data.data.appId,
							// 必填，生成签名的时间戳
							timestamp: res.data.data.timestamp,
							// 必填，生成签名的随机串
							nonceStr: res.data.data.nonceStr,
							// 必填，签名，见附录1
							signature: res.data.data.cardSign,
							// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							jsApiList: ['checkJsApi', 'scanQRCode']
						});

						wx.error(function(res) {
						});
						const _this = this;
						wx.ready(function() {
							// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
							// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
							wx.checkJsApi({
								// 判断当前客户端版本是否支持指定JS接口
								jsApiList: ["scanQRCode"],
								success: function(res) {
									// 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
									if (res.checkResult.scanQRCode === true) {
										wx.scanQRCode({
											// 微信扫一扫接口
											// desc: "scanQRCode desc",
											needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
											scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
											success: function(res) {
												const data = JSON.parse(res.resultStr)
												if (data.code && data.track_id) {
													uni.navigateTo({
														url: '/pages/backstage/delivery/recycle?code=' + data.code + '&track_id=' + data.track_id +
															'&' + _this.version
													})
												} else {
													uni.showToast({
														icon: "none",
														title: "错误二维码",
														duration: 2000
													});
												}
											},
											error: function(res) {
												alert(res, 2);
												if (res.errMsg.indexOf('function_not_exist') > 0) {
													alert('版本过低请升级')
												}
											}
										});
									} else {
										Toast("抱歉，当前客户端版本不支持扫一扫");
									}
								},
								fail: function(res) {
									// 检测getNetworkType该功能失败时处理
									Toast("fail" + res);
								}
							});
						});
					}
				});

				// this.code = "";
				// this.resetTemp();
				// this.$refs.detailsPopup.open();
			},
			popClose() {
				this.$refs.detailsPopup.close();
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value;
				this.getList();
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDetails(val) {
				const code = val
				this.code = code;
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_dispatching_fetchDetails",
					version: "1.0",
					type: 2,
					data: {
						code: code
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			submitConfirm() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_dispatching_fetch",
					version: "1.0",
					type: 2,
					data: {
						code: this.code
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			submitStock() {
				if (this.checkedItems.length > 0) {
					const path = {
						app: "wxadmin",
						api: "api_wxadmin_supplier_finish",
						version: "1.0",
						type: 2,
						data: {
							ids: this.checkedItems.join(',')
						}
					}
					const _this = this;
					_this.sendSock(path, function(res) {
						_this.getSock(res.data)
					})
				} else {
					uni.showToast({
						icon: "none",
						title: '请选择备餐',
						duration: 2000
					});
				}
			},
			resetTemp() {
				this.temp = {
					supplier_name: '',
					supply_name: '',
					create_time: '',
					goods_name: '',
					number: undefined,
					equipment_code: ''
				}
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						let key = this.getUrlKey('key')
						this.getMess(key);
					} else {
						if (resj.api === "api_wxadmin_admin_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wxadmin_admin_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wxadmin_dispatching_getList") {
							this.list = resj.data
						} else if (resj.api === "api_wxadmin_dispatching_fetchDetails") {
							this.showTemp = true;
							this.temp = resj.data[0]
						} else if (resj.api === "api_wxadmin_dispatching_fetch") {
							this.popClose()
							uni.showToast({
								icon: "none",
								title: "取货成功",
								duration: 2000
							});
							this.showTemp = false;
							this.getList()
						}
					}
				}
			}
		}
	}
</script>

<style>
	.titles-bar {
		width: 100%;
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 30rpx;
		box-sizing: border-box;
	}

	.time-manage {
		width: 70rpx;
		height: 70rpx;
		padding-top: 8rpx;
		box-sizing: border-box;
	}

	.time-choose-img {
		width: 70rpx;
		height: 70rpx;
	}

	.table-head {
		height: 82rpx;
		display: flex;
		align-items: center;
		background-color: #F7F5F6;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		padding: 0 30rpx;
	}

	.head-item {
		flex: 1;
	}

	.content-list {
		height: 82rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #E0E0E0;
	}

	.content-item {
		flex: 1;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.leave_cont {
		background-color: #ffffff;
	}

	.leave_cont .ul {
		padding: 0 30rpx;
	}

	.leave_cont .ul .li {
		display: flex;
		align-items: center;

	}

	.leave_cont .ul .li:not(:last-child) {
		border-bottom: 1rpx solid #efefef;
	}

	.leave_cont .ul .li text {
		padding: 40rpx 0;
		font-size: 34rpx;
		font-family: '黑体';
	}

	.leave_cont .ul .li .flex1 {
		flex: 1;
		text-align: right;
		padding-right: 25rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.time-header {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e5e5e5;
		height: 98rpx;
		align-items: center;
	}

	.time-items {
		padding: 0rpx 28rpx;
		font-size: 36rpx;
	}

	.time-cancel {
		color: #888;
	}

	.time-confirm {
		color: #007aff;
	}

	.order-time {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.order-count {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 30rpx;
		margin-top: 20rpx;
	}

	.count-title {
		color: #999999;
	}

	.count-number {
		margin-left: 10rpx;
		color: #FF5500;
	}

	.flex-submit {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0rpx;
	}

	.submit-button {
		width: 750rpx;
		height: 98rpx;
		background: rgba(250, 250, 250, 1);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pick-up-img {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pick-up-name {
		margin-left: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 195, 36, 1);
		line-height: 1;
	}

	.iconClum {
		width: 64rpx;
		height: 32rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(153, 153, 153, 1);
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.orange {
		color: #FF5500;
		border: 1rpx solid rgba(255, 85, 0, 1);
	}

	.blue {
		color: #268DFF;
		border: 1rpx solid rgba(38, 141, 255, 1);
	}

	.determine-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.determine-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.determine-close {
		width: 30rpx;
		height: 30rpx;
	}

	.determine,
	.determine-close,
	.determine-code {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.code-input {
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(224, 224, 224, 1);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		text-align: center;
	}

	.determine-code {
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.determine-code .code-div:not(:first-child) {
		margin-left: 40rpx;
	}

	.determine-top,
	.determine-main {
		padding: 0 30rpx;
	}

	.determine-bar {
		width: 100%;
		height: 10rpx;
		background: rgba(245, 245, 245, 1);
	}

	.determine-main .determine-items:not(:last-child) {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.items-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.items-val {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}



	.determine-bottom {
		padding: 0rpx 30rpx 30rpx 30rpx;
	}
</style>
